/**
 * 引擎配置
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>引擎配置</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表单 -->
    <div style="margin-left:200px; margin-top:100px">
      <el-form ref="form" label-width="350px">
        <h3 style="margin-left:280px">强时效订单阈值设定</h3>
        <el-form-item label="强弱时效阈值" :rules="[{required:true, message:'强弱时效阈值不能为空'},]">
          <el-input-number
            v-model="defaultDayNum"
            :min="1"
            :max="5"
            label="强弱时效阈值"
            style="width:150px"
            :disabled="noChanging"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="强时效关键交通工具" :rules="[{required:true, message:'交通工具不能为空'},]">
          <el-select
            v-model="vehicle"
            placeholder="请选择工具"
            style="width:150px;"
            :disabled="noChanging"
          >
            <el-option
              v-for="item in vehicleOptions"
              :key="item.vehicle"
              :label="item.label"
              :value="item.vehicle"
            ></el-option>
          </el-select>
        </el-form-item>

        <h3 style="margin-left:280px">弱时效订单阈值设定</h3>
        <el-form-item label="时效阈值" :rules="[{required:true, message:'时效阈值不能为空'},]">
          <el-select
            v-model="strengthAndWeaknessAgingThreshold"
            placeholder="请选择天数"
            style="width:150px;"
            :disabled="noChanging"
          >
            <el-option
              v-for="item in dayOptions"
              :key="item.strengthAndWeaknessAgingThreshold"
              :label="item.label"
              :value="item.strengthAndWeaknessAgingThreshold"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="距离阈值" :rules="[{required:true, message:'距离阈值不能为空'},]">
          <el-input-number
            v-model="defaultDistance"
            :min="10"
            :max="20"
            label="强弱时效阈值"
            style="width:150px"
            :disabled="noChanging"
          ></el-input-number>
        </el-form-item>
      </el-form>

      <div>
        <el-button
          type="primary"
          @click="beginChangeSettings"
          style="margin-left:200px; float:left;"
          :disabled="isUsingChangeButtuon"
        >修改配置</el-button>
        <el-button
          type="primary"
          @click="submitChangedSettings"
          style="margin-left:60px; float:left;"
          :disabled="noChanging"
        >提交修改</el-button>
        <el-button
          type="primary"
          @click="cancelChange"
          style="margin-left:60px; float:left;"
          :disabled="noChanging"
        >放弃修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      noChanging: true, //并未点击修改按钮，没有开始进行设置，表单无法使用
      isUsingChangeButtuon: false, //没有在使用设置按钮
      defaultDayNum: 1, //默认天数
      defaultDistance: 20, //默认时效距离
      strengthAndWeaknessAgingThreshold: "5day", //默认弱时效阈值
      vehicle: "walk", //默认交通工具
      dayOptions: [
        {
          strengthAndWeaknessAgingThreshold: "3day",
          label: "3天"
        },
        {
          strengthAndWeaknessAgingThreshold: "5day",
          label: "5天"
        }
      ],
      vehicleOptions: [
        {
          vehicle: "walk",
          label: "步行"
        },
        {
          vehicle: "bike",
          label: "自行车"
        },
        {
          vehicle: "tricycle",
          label: "三轮车"
        },
        {
          vehicle: "truck",
          label: "货车"
        }
      ]
    };
  },
  methods: {
    beginChangeSettings() {
      //点击后，所有表单内容都可以进行修改
      this.noChanging = false;
      this.isUsingChangeButtuon = true;
    },
    submitChangedSettings() {
      //提交修改后的设置，如果没有修改，则无法使用
      this.noChanging = true;
      this.isUsingChangeButtuon = false;
    },
    cancelChange() {
      //取消设置修改，返回默认值，这里应存储defaultValue对默认值进行存储，修改成功一次后更新默认值为修改后的最新的设置值。
      this.noChanging = true;
      this.isUsingChangeButtuon = false;
    },
    returnToOrder() {
      console.log("111");
      //跳转要注意的是，返回后的界面是哪一个，以及返回的那个界面的输入状态的保存。
    }
  }
};
</script>

<style scoped>
</style>

 